<template>
    <div>
        <el-dialog ref="messageDialog" :title="messageTitle" :visible.sync="dialogMessageVisible" :show-close="false" :close-on-click-modal="false"
            >
            <Editor v-model="messageContent" style="height: 210px;"></Editor>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogMessageVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendMessageSubmit()">发 送</el-button>
            </div>
        </el-dialog>
        <el-card class="box-card aside-div">
            <div @click="customer">
                <avue-data-operatext :option="option"></avue-data-operatext>
            </div>
            <div style="text-align: center;margin-top: 15px;">
                <el-button-group>
                    <!-- :disabled="userComponetBtn.disabled === 1 ? true : false" -->
                    <el-button :type="userComponetBtn.follower === 1 ? 'success': ''" :disabled="true"
                        :icon="userComponetBtn.follower === 1 ? 'el-icon-check': 'el-icon-plus'">{{userComponetBtn.follower === 1 ? '已关注' : '关注'}}</el-button>
                    <el-button :disabled="userComponetBtn.disabled === 1 ? true : false" icon="el-icon-chat-dot-round" @click="sendMessage">私信</el-button>
                </el-button-group>
            </div>
        </el-card>
        <el-card v-if="keys !== 'question'" class="box-card aside-div" style="min-height: 13.75rem;">
            <el-tabs v-model="activeName">
                <el-tab-pane label="最新问题" name="latest">
                    <div v-for="latest in latestData" :key="latest.id" class="q-title" @click="goShowQuestion(latest)">
                        <el-tag>{{latest.timeshow}}</el-tag>
                        <span>{{latest.title}}</span><span v-if="latest.lead !==''"> - {{latest.lead}}</span>
                        <el-divider></el-divider>
                    </div>
                    <avue-empty v-if="latestData.length === 0"></avue-empty>
                </el-tab-pane>
                <el-tab-pane label="最受欢迎" name="loves">
                    <div v-for="love in lovesData" :key="love.id" class="q-title" @click="goShowQuestion(love)">
                        <el-tag><i class="el-icon-star-on"></i>{{love.favourite_count}}</el-tag>
                        <span>{{love.title}}</span><span v-if="love.lead !==''"> - {{love.lead}}</span>
                        <el-divider></el-divider>
                    </div>
                    <avue-empty v-if="lovesData.length === 0"></avue-empty>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <el-card v-if="keys === 'question'" class="box-card aside-div" style="min-height: 13.75rem;">
            <h4>{{userComponetBtn.disabled === 1 ? '我的' : '他的'}}全部文章</h4>
            <hr/>
            <div v-for="list in listData" :key="list.id" class="q-title" @click="goShowQuestion(list)">
                <el-tag><i class="el-icon-star-on"></i>{{list.favourite_count}}</el-tag>
                <span>{{list.title}}</span><span v-if="list.lead !==''"> - {{list.lead}}</span>
                <el-divider></el-divider>
            </div>
            <div style="text-align: center;">
                <span style="cursor: pointer;color: #409EFF;" v-if="listData.length !== 0 && has_more === 1" @click="getShowQuestionList">加载更多</span>
                <span style="color: #C0C4CC;" v-if="listData.length !== 0 && has_more === 0">没有更多数据了</span>
            </div>
            <avue-empty v-if="listData.length === 0"></avue-empty>
        </el-card>
    </div>
</template>

<script>
    import Editor from '../components/Editor'
    import {
        getToken
    } from '../util/auth'
    export default {
        inject: ['reload'],
        props:["keys", "userId"],
        data() {
            return {
                zhihuUserInfo: null,
                dialogMessageVisible: false,
                messageTitle: '',
                messageContent: '',
                activeName: 'latest',
                latestData: {},
                lovesData: {},
                userComponetBtn: [],
                option: {
                    span: 24,
                    data: []
                },
                listData: [],
                page: 1,
                total: 0,
                has_more: 0,
            }
        },
        components: {
            Editor
        },
        created() {
            if (localStorage.getItem('zhihuUserInfo') && localStorage.getItem('zhihuUserInfo') !== 'null' && getToken()) {
                this.zhihuUserInfo = JSON.parse(localStorage.getItem('zhihuUserInfo'))
            }
            this.getPersonalComponent()
            if (this.keys !== 'question') {
                this.getShowQuestionLimitList()
            }
            if (this.keys === 'question') {
                this.getShowQuestionList()
            }
        },
        methods: {
            customer() {
                if (this.keys !== 'question') {
                    var user_id = this.$route.query.user_id
                } else {
                    var user_id = this.userId
                }
                if (this.zhihuUserInfo.id == user_id) {
                    this.$router.push({path: "/customer"})
                } else {
                    this.$router.push({path: `/custuser/${user_id}`})
                }
            },
            getShowQuestionList() {
                const _this = this
                const params = {
                    page: _this.page,
                    limit: 10,
                    user_id: _this.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.listQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            // _this.listData.push(res.data.list)
                            Object.keys(res.data.list).forEach((item, index) => {
                                // console.log(item)
                                _this.listData.push(res.data.list[item])
                            })
                            _this.total = res.data.count
                            _this.has_more = res.data.has_more
                            _this.page = _this.page + 1
                        } else {
                            _this.listData = []
                            _this.total = 0
                            _this.has_more = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.listData = []
                        _this.total = 0
                        _this.has_more = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.listData = []
                    _this.total = 0
                    _this.has_more = 0
                })
            },
            sendMessage () {
                this.messageTitle = "发送私信给：" + this.option.data[0].title
                this.dialogMessageVisible = true
            },
            sendMessageSubmit () {
                // 发送私信
                const _this = this
                if (_this.keys !== 'question') {
                    var user_id = _this.$route.query.user_id
                } else {
                    var user_id = _this.userId
                }

                const params = {
                    user_id: user_id,
                    content: _this.messageContent
                }

                if (_this.messageContent === '') {
                    _this.$message({
                        showClose: false,
                        message: '发送的私信内容不能为空！',
                        type: 'waring'
                    })
                    return;
                }

                _this.axios.post(_this.$API.ZHIHUAPI.sendPrivateMessage, _this.qs.stringify(params)).then((
                    res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        _this.messageContent = ''
                        _this.dialogMessageVisible = false
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'success'
                        })
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                })
            },
            goShowQuestion(item) {
                if (this.keys === 'question') {
                    this.$router.push({path: `/question/${item.id}/${item.user_id}`})
                } else {
                    this.$router.push({
                        path: '/questionComment',
                        query: {
                            question_id: item.id,
                            user_id: item.user_id
                        }
                    })
                }
                this.$emit('getQuestionCommentByQuestionID')
            },
            // 获取最新，最受欢迎问题列表
            getShowQuestionLimitList() {
                const _this = this
                const params = {
                    user_id: _this.$route.query.user_id
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getShowQuestionLimitList, _this.qs.stringify(params)).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.latestData = res.data.latest
                            _this.lovesData = res.data.loves
                        } else {
                            _this.latestData = {}
                            _this.lovesData = {}
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.latestData = {}
                        _this.lovesData = {}
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.latestData = {}
                    _this.lovesData = {}
                })
            },
            // 获取信息
            getPersonalComponent() {
                const _this = this
                if (_this.keys !== 'question') {
                    var user_id = _this.$route.query.user_id
                } else {
                    var user_id = _this.userId
                }
                const params = {
                    user_id: user_id
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getPersonalComponent, _this.qs.stringify(params)).then((
                    res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.option.data = res.data.userComponet
                            _this.userComponetBtn = res.data.userComponetBtn
                        } else {
                            _this.option.data = {}
                            _this.userComponetBtn = []
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.option.data = {}
                        _this.userComponetBtn = []
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.option.data = {}
                    _this.userComponetBtn = []
                })
            },
        },
    }
</script>
<style scoped="scoped">
    .q-title {
        cursor: pointer;
        display: list-item;
        table-layout: fixed;
        list-style-type: none;
        list-style-position: outside;
        padding: .21428571em 0;
        font-family: Helvetica, Arial, PingFang SC, Noto Sans, Roboto, Microsoft Yahei, sans-serif;
        color: rgba(0, 0, 0, .6);
        font-size: 12px;
        line-height: 12px;
    }

    .q-title:hover {
        color: #1e70bf;
    }

    .el-tag {
        background-color: #ecf5ff;
        border-color: #d9ecff;
        display: inline-block;
        height: 20px;
        padding: 0 10px;
        line-height: 20px;
        font-size: 12px;
        color: #409EFF;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        box-sizing: border-box;
        white-space: nowrap;
    }
</style>
